<template>
<div>
  <van-nav-bar
      title="用户地址"
      left-text="我的收货地址"
      left-arrow
      right-text="管理"
      @click-left="onClickLeft"
      @click-right="onClickRight"
  />
  <van-row style="padding:10px" v-for="(item,index) in list" :key="item.id">
    <van-col span="4" style="position: relative"><van-checkbox @click="select(item.isDefault,index)" class="checkbox" v-model="item.isDefault"></van-checkbox></van-col>
    <van-col span="16">
            <div class="addcol">
              <div>{{item.name}}  {{item.tel}}</div><span style="margin-left:4px;color: white;background: red" v-if="item.isDefault">默认</span>
            </div>
      <div>{{item.address}}</div>
    </van-col>
    <van-col span="2"><van-icon  @click="onEdit(index)"  name="edit" /></van-col>
    <van-col span="2">
      <transition name="van-slide-right">
        <div v-show="flag">
          <van-icon @click="removaddress(index)" v-if="flag" name="delete"/>
        </div>
      </transition>
    </van-col>
  </van-row>
  <van-goods-action>
    <van-goods-action-button
        type="danger"
        text="添加地址"
        @click="onClickButton"
    />
  </van-goods-action>
  <van-dialog v-model="show" @cancel="cancel" @confirm="confirm" message="是否要删除此地址?" title="删除地址" show-cancel-button></van-dialog>
</div>
</template>

<script>
import {Toast} from "vant";
export default {
  data() {
    return {
      flag:false,
      show:false,
      remId:'',
    };
  },
  computed:{
    list(){
      return this.$store.getters["address/list"]
    }
  },
  methods: {
    //设置默认
    select(bool,index){
      if(bool){Toast('默认地址设置成功！')}
      this.$store.commit('address/seTaddress', {bool,index})
    },
    //跳转页面
    onClickButton() {
     this.$router.push(`/setaddress`)
    },
    //修改用户地址
    onEdit(index) {
      this.$router.push(`/upaddress/${index}`)
    },
    //顶部返回键
    onClickLeft() {
     this.$router.back()
     },
    //弹出删除地址提示框
    removaddress(index){
      this.remId=index;
      this.show=true;
    },
    //删除地址
    confirm(){
      this.$store.commit('address/revomobj',this.remId)
    },
    cancel(){
      Toast("已取消！")
      return
    },
    //显示删除图片
    onClickRight(){
      this.flag=!this.flag
    }
  },
};

</script>

<style scoped lang="less">
.van-checkbox{position:absolute;left:50%;top:50%;transform: translateX(-50%)translateY(50%);}
.van-icon-edit,.van-icon-delete:before{
  font-size: 22px;
  margin-left:4px;
  margin-top: 10px;
}
.span{color:white;background: red;border-radius:40%;padding:4px 10px;line-height:16px;}
.addcol{display: flex;justify-content: start;line-height:16px;}
</style>